<template>
	<view class="main">
		<view class="maps" :style="mapHeight">
			<map class="map-main" show-location :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="markerClick" :polyline="polyline"></map>
		</view>
		<view class="carSearch" :style="'bottom:' + searchHeight + 'px'">
			<u-input
				border
				v-model="inputValue"
				type="text"
				placeholder="请输入车辆号码(输入1/3可获取静态信息)"
				@focus="focusInput"
				:adjust-position="false"
				auto-blur
				@confirm="confirmInput"
				clearable
				@keyboardheightchange="keyboardChange"
				:custom-style="customStyle"
			/>
		</view>
		<view class="searchContent" :style="'height:' + contentHeight + 'px'">
			<view class="_content" @click="toDetail()">
				<text>湘A5022</text>
				<text>状态正常运行</text>
				<text>查看详情></text>
			</view>
			<view class="_info">
				<text>设备名称：设备A</text>
				<text>MAC地址：55-12-34-56-78-90</text>
			</view>
			<view class="_info">
				<text>4G信号：23.0</text>
				<text>DTMB信号：12</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			customStyle:{
				backgroundColor:'#ffffff'
			},
			searchHeight: 20,
			contentHeight: 0,
			results: {},
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 28.25591,
			longitude: 112.98626,
			covers: [],
			polyline: [],
			inputValue: ''
		};
	},
	computed:{
		mapHeight(){
			return `height:calc(100vh - env(safe-area-inset-bottom) - ${this.contentHeight}px)`
		}
	},
	watch:{
		inputValue(val, newval) {
		    if(val == ''){
					this.contentHeight = 0
					this.covers = []
				}
		  }
	},
	methods: {
		markerClick(e) {
			console.log(e);
			if (e.detail.markerId == '333') {
			}
		},
		// 输入框聚焦时触发
		focusInput(e) {},
		// 点击完成按钮时触发
		confirmInput() {
			uni.showLoading({ title: '加载中' });
			if (this.inputValue == 1) {
				uni.hideLoading();
				setTimeout(() => {
					
					this.results = {
						name: '湘A123'
					};
					this.contentHeight = 135;
					this.searchHeight = 20;
				
				this.latitude = 28.2276;
				this.longitude = 112.951447;
				this.covers = [
					{
						id: 333,
						latitude: 28.2276,
						longitude: 112.951447,
						iconPath: require('./images/location.png'),
						width: 20,
						height: 20,
						callout: {
							content: '这是我想找的一辆车',
							fontSize: '13',
							bgColor: '#ffffff',
							display: 'BYCLICK',
							textAlign: 'left',
							color: '#000'
						}
					}
				]
				}, 500);
			}else if(this.inputValue == 3){
				uni.hideLoading();
				setTimeout(() => {
					
					this.results = {
						name: '湘A123'
					};
					this.contentHeight = 135;
					this.searchHeight = 20;
				
				this.latitude = 28.169649;
				this.longitude = 112.960617;
				this.covers = [
					{
						id: 323,
						latitude: 28.169649,
						longitude: 112.960617,
						iconPath: require('./images/location.png'),
						width: 20,
						height: 20,
						callout: {
							content: '这是我想找的一地点',
							fontSize: '13',
							bgColor: '#ffffff',
							display: 'BYCLICK',
							textAlign: 'left',
							color: '#000'
						}
					}
				]
				}, 500);
			} else {
				setTimeout(() => {
					uni.hideLoading();
					// 清除数据
					this.covers = []
					this.results = {};
					// this.searchHeight = 80;
					this.contentHeight = 0;
					uni.showToast({
						title: '没有找到相关信息',
						icon: 'none'
					});
				}, 500);
			}
		},
		// 键盘高度发生变化的时候触发此事件
		// keyboardChange(e) {
		// 	console.log(e.detail.height);
		// 	if (e.detail.height > 40) {
		// 		this.searchHeight = e.detail.height;
		// 	}
		// 	if (e.detail.height == 0) {
		// 		this.searchHeight = 80;
		// 	}
		// },
		// 车辆详情
		toDetail() {
			this.$u.route('/pages/deviceDetail/deviceDetail');
		}
	}
};
</script>

<style scoped lang="scss">
.main {
	display: flex;
	flex-direction: column;
	position: relative;
}
.maps{
	// height: calc(100vh - env(safe-area-inset-bottom));
	overflow: hidden;
	transition: 0.5s height;
}
.map-main {
	width: 100%;
	height: 100%;
	// height: calc(100vh - env(safe-area-inset-bottom));
}
.carSearch {
	position: absolute;
	// bottom: calc(240rpx + env(safe-area-inset-bottom));
	left: 40rpx;
	right: 40rpx;
	// height: 80rpx;
	background-color: #ffffff;
	// input {
	// 	background-color: #ffffff;
	// 	border-radius: 10rpx;
	// 	padding-left: 20rpx;
	// 	height: 80rpx;
	// 	line-height: 80rpx;
	// }
}
.searchContent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: env(safe-area-inset-bottom);
	transition: 0.5s height;
	// height: 300rpx;
	background-color: #f2f2f2;
	overflow: hidden;
	._content {
		padding: 20rpx;
		height: 90rpx;
		// display: flex;
		// flex-direction: row;
		// justify-content: space-between;
		// align-items: center;
		@include flex(row,space-between,center)
	}
	._info {
		padding: 20rpx;
		height: 90rpx;
		// display: flex;
		// flex-direction: row;
		// justify-content: space-between;
		// align-items: center;
		@include flex(row,space-between,center)
		text {
			// flex: 1;
		}
	}
}
</style>
